<template>
	<view>
		<view class="idcard-main">
			
			<view class="tui-top">
				<tui-steps :items="items" :type="2" spacing="180rpx" :activeSteps="activeSteps"></tui-steps>
			</view>
			<!-- 第一步 start -->
			<view class="" v-if="activeSteps==0">
				<view class="idcard-text">
					身份证照片 ( 正面 )
				</view>
				<view class="idcard-items">
					<view class="idcard-uper-btn" @tap="selectImg1">
						<view class="img"><image src="../../../static/icard/camera.png" mode="widthFix" /></view>
						<view class="text">拍摄或选择照片</view>
					</view>
					<view class="idcard-preview">
						<image :src="idCard1"  @tap="previewImg1" mode="widthFix"></image>
					</view>
				</view>
				<view class="idcard-text">
					身份证照片 ( 背面 )
				</view>
				<view class="idcard-items">
					<view class="idcard-uper-btn" @tap="selectImg2">
						<view class="img"><image src="../../../static/icard/camera.png" mode="widthFix" /></view>
						<view class="text">拍摄或选择照片</view>
					</view>
					<view class="idcard-preview">
						<image :src="idCard2" @tap="previewImg2" mode="widthFix" />
					</view>
				</view>
			</view>
			<!-- 第一步 end -->
			
			<!-- 第二步 start -->
			<view class="" v-if="activeSteps==1">
				<form>
					<view class="cu-form-group margin-top">
						<view class="title">真实姓名</view>
						<input placeholder="真实姓名" name="input" v-model="realname"></input>
					</view>
					<view class="cu-form-group">
						<view class="title">身份证号</view>
						<input placeholder="身份证号码" name="input"  @input="cardCode" v-model="iccard_code"></input>
					</view>
					<view class="cu-form-group">
						<view class="title">有效期</view>
						<picker mode="date" :value="validitydate" start="2015-09-01" end="2020-09-01" @change="validityDateChange">
							<view class="picker">
								{{validitydate}}
							</view>
						</picker>
					</view>
					<view class="cu-form-group">
						<view class="title">性别</view>
						<picker @change="PickerChange" :value="sexIndex" :range="picker">
							<view class="picker">
								{{sexIndex>-1?picker[sexIndex]:'男'}}
							</view>
						</picker>
					</view>
					<view class="cu-form-group">
						<view class="title">出生年月</view>
						<picker mode="date" :value="date" start="2015-09-01" end="2020-09-01" @change="DateChange">
							<view class="picker">
								{{date}}
							</view>
						</picker>
					</view>
					<view class="cu-form-group margin-top">
						<textarea maxlength="-1" :disabled="modalName!=null" @input="textareaAInput" placeholder="住址" v-model="address"></textarea>
					</view>
				</form>
			</view>
			<!-- 第二步 end -->
			
			<!-- 第三步 start -->
			<view class="" v-if="activeSteps==2">
				<form>
					<view class="cu-form-group">
						<view class="title">ICCID</view>
						<input placeholder="物联网卡号" name="input" v-model="iccid"></input>
					</view>
				</form>
			</view>
			<!-- 第三步 end -->
			
			<view class="tui-flex"  style="margin-top:38upx;">
				<view class="tui-center  tui-col-6" v-if="activeSteps>0">
					<button class="tui-col-8" type="primary" @tap="backStep" >上一步</button>
				</view>
				<view class="tui-center" :class="activeSteps>0?'tui-col-6':'tui-col-12'">
					<button class="tui-col-8" type="primary" @tap="change">{{btnText}}</button>
				</view>
			</view>
			
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			btnText:'下一步',
			items: [{
				title: "身份证上传",
			}, {
				title: "信息校验",
			}, {
				title: "绑定物联卡",
			}],
			iccid:'',
			date: '2018-12-25',
			validitydate:'2018-12-25',
			picker: ['男', '女'],
			sexIndex:0,
			activeSteps: 0,
			modalName: null,
			idCard1 : '../../../static/icard/idcard1.png',
			idCard2 : '../../../static/icard/idcard2.png',
			url1:'',
			imageData1:'',
			url2:'',
			imageData2:'',
			textareaAValue:'',
			realname:'',
			address:'',
			iccard_code:''
		};
	},
	onLoad:function(){
		let that = this
		that.initPage()
	},
	methods: {
		initPage:function(){
			let that = this;
			that.tui.request("/diandi_operator/user/info","POST",{}).then((res)=>{
				console.log(res.data)
				if (res.code == 200) {
					
					that.realname = res.data.name;
					that.iccard_code = res.data.iccard_code;
					that.imageData1 = res.data.iccard_img_contrary;
					that.imageData2 = res.data.iccard_img_front;
					
					that.idCard1 = res.data.imageData1;
					that.idCard2 = res.data.imageData2;
					
					that.birthday = res.data.birthday;
					that.sex = res.data.sex;
					that.validity_time = res.data.validity_time;
					that.address = res.data.address;
				} else {
					that.tui.toast(res.message);
				}
			}).catch((res)=>{
				console.log(res)
			})
		},
		register:function(){
			let that = this;
			let data = {
				name:that.realname,
				iccard_code:that.iccard_code,
				iccard_img_contrary:that.imageData1,
				iccard_img_front:that.imageData2,
				birthday:that.date,
				sex:that.sexIndex,
				validity_time:that.validitydate,
				address:that.address,
				iccid:that.iccid,
			}
			
			
			if(!data.name){
				that.tui.toast('请输入真实姓名');
				return false;
			}
			
			if(!data.iccard_code){
				that.tui.toast('请输入身份证号码');
				return false;
			}
			
			
			if(data.iccard_img_contrary == '../../../static/icard/idcard1.png'){
				that.tui.toast('请上传身份证正面');
				return false;
			}
			
			if(data.iccard_img_contrary == '../../../static/icard/idcard2.png'){
				that.tui.toast('请上传身份证反面');
				return false;
			}
			
			if(!data.address){
				that.tui.toast('请输入真实住址');
				return false;
			}
			
			that.tui.request("/diandi_operator/user/register","POST",data).then((res)=>{
				console.log(res.data)
				if (res.code == 200) {
					
					that.tui.toast(res.message);
				} else {
					that.tui.toast(res.message);
				}
			}).catch((res)=>{
				console.log(res)
			})
			
		},
		cardCode:function(e){
			this.iccard_code = e.detail.value;
		},
		backStep(){
			let steps = this.activeSteps - 1
			this.activeSteps = steps < 0 ? 0 : steps
			if(steps==2){
				this.btnText = '提交认证'
			}else{
				this.btnText = '下一步'
			}
		},
		change() {
			let steps = this.activeSteps + 1
			if(steps > 2){
				this.register();
				return false;
			}
			this.activeSteps = steps > 2 ? 0 : steps
			if(steps==2){
				this.btnText = '提交认证'
			}else{
				this.btnText = '下一步'
			}
			
			
		},
		validityDateChange(e){
			this.validitydate = e.detail.value
		},
		DateChange(e) {
			this.date = e.detail.value
		},
		PickerChange(e) {
			this.sexIndex = e.detail.value
		},
		selectImg1 : function() {
			let _self = this;
			uni.chooseImage({
				count:1,
				success:function(e){
					_self.idCard1 = e.tempFilePaths[0];
					_self.tui.uploadFile(_self.idCard1).then((res)=>{
							_self.url1 = res.url
							_self.imageData1 = res.attachment
							console.log(res)
					}).catch((res)=>{});
				}
			})
		},
		selectImg2 : function() {
			let _self = this;
			uni.chooseImage({
				count:1,
				success:function(e){
					_self.idCard2 = e.tempFilePaths[0];
					_self.tui.uploadFile(_self.idCard2).then((res)=>{
							_self.url2 = res.url
							_self.imageData2 = res.attachment
					}).catch((res)=>{});
				}
			})
		},
		previewImg1 : function(){
			uni.previewImage({
				urls:[_self.idCard1]
			});
		},
		previewImg2 : function(){
			uni.previewImage({
				urls:[_self.idCard2]
			});
		},
		uploadCards : function(){
			if(this.url1 == '' || this.url2== ''){
				uni.showToast({title:"请选择身份证照片", icon:"none"});
				return;
			}
			
		},
		textareaAInput(e) {
			this.address = e.detail.value
		},
	},
}
</script>
<style>
view{font-size:28upx;}
.idcard-main{margin:20upx 30upx;}
.idcard-desc{line-height:2em; background:#FFFFFF; padding:20upx; border-radius:10upx;}
.idcard-text{line-height:2em; margin-top:30upx;}
.idcard-items{background:#FFFFFF; padding:30upx 0; display:flex; margin:30upx 0; border-radius:10upx; align-items: flex-start;}
.idcard-uper-btn{width:276upx; margin:0 60upx; background:#F1F1F1; padding-bottom:10upx; border-radius:10upx; text-align:center;}
.idcard-uper-btn .img{width:100upx; height:100upx; margin:0 auto; margin-top:30upx;}
.idcard-uper-btn .img image{width:100upx; height:100upx;}
.idcard-uper-btn .text{width:100%; margin-top:10upx; text-align:center; line-height:2em;}
.idcard-preview{width:50%; margin:0 30upx;}
.idcard-preview image{width:100%;}
</style>